<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-05-20 17:11:12
 * @LastEditTime: 2019-09-26 16:37:41
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div class="container">
        <div class="title">
            <div class="right"><img src="/static/images/right.png" alt="">{{number.right}}</div>
            <div class="error"><img src="/static/images/error.png" alt="">{{number.error}}</div>
            <div class="count"><img src="/static/images/count.png" alt="">{{number.count+'/'+question.length}}</div>
            <p class="time">计时：{{time}}</p>
        </div>
        <h6 class="question" >
            <!-- 1.依次填入下列语句横线处的词语，恰当的一项是 -->
            {{nowIndex+1}}.{{question[nowIndex].title}}
        </h6>
        <div class="subject">
            <p>{{question[nowIndex].direction}}</p>
        </div>
        <div class="answer">
            <block  v-for="(item,index) in question[nowIndex].selectList" :key="index">
                <div class="item" @click='chooseAnswer(index,item.uid,$event,question[nowIndex].uid)' :data-isRight="item.isRight"  
                :class="(conclusion[nowIndex].isRight && (item.uid == answerItem))?'active':((item.isRight&&conclusion[nowIndex].isRight>=0)?'active':(item.uid == answerItem?'error':''))">
                    <div class="check"><div></div><b>{{optionItem[index]}}</b></div>
                    <div class="option">{{item.title}}</div>
                </div>
            </block>
            <div style="height:180rpx" v-show="isShow_analy"></div>
            <div class="analy" v-show="isShow_analy" style="visibility:hidden">
                {{question[nowIndex].analysis}}
            </div>
        </div>


            
        <div class="footer" :style="isShow_analy?'box-shadow:0px 0px 10px rgba(0,0,0,0.2);':''">
            <div class="analy" v-show="isShow_analy">
                {{question[nowIndex].analysis}}
            </div>
            <switch @click="showAnaly" :checked="isShow_analy"></switch>
            <ul>
                <li @click="preQuestion">上一题</li>
                <li><button open-type="share">求助</button></li>
                <li><img src="/static/images/isStar.png" alt=""></li>
                <li @click="to('bank')">题库</li>
                <li @click="nextQuestion">下一题</li>
            </ul>
        </div>
    </div>
</template>



<script>
const apis = require('../../utils/api').default
const utils = require('../../utils/util')
export default {
    data(){
        return {
            nowIndex:0,//当前显示题目的index
            optionQuestion:[
                'AAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAA',
                'BBBBBBBBBBBBBBBBBBB',
                'CCCCCCCCCCCCCCCCCCC',
                'DDDDDDDDDDDDDDDDDDD',
                'EEEEEEEEEEEEEEEEEEE'
            ],
            optionItem:['A','B','C','D','E','F','G','H','I','J','K','L','M','N'],
            answerItem:-1,
            question:[{title:'加载中~',direction:'加载中~',selectList:['加载中~','加载中~','加载中~','加载中~']}],//后台显示的题目数据
            custAnswer:[],//用户的答案
            sysAnswer:[],//系统正确答案
            isShow_analy:false,
            conclusion:{'0':{uid:'--',isRight:'--'}},//最后错误或正确列表
            time:'00 : 00',//计时
            time_inter:'',
            ishave_page:false,
            time_status:'', //定时器
            number:{right:'0',error:'0',count:'0'}
        }
    },
    onShow(){
        this.$set(this,'answerItem',this.custAnswer[this.nowIndex])
    },
    onLoad(options){
        const _this = this
        if(options.index){
            // bank过来
            const bankIndex = options.index
            if(bankIndex){
                _this.$set(_this,'nowIndex',bankIndex-1)
                _this.$set(_this,'conclusion',wx.getStorageSync('conclusion'))
            }else{
                _this.$set(_this,'nowIndex',0)
            }
        }else{
            this.$set(this,'nowIndex',0)
            this.$set(this,'answerItem',-1)
            this.$set(this,'custAnswer',[])
            this.$set(this,'time','00 : 00')
            this.$set(this,'number',{right:'0',error:'0',count:'0'})
            this.$set(this,'conclusion',{'0':{uid:'--',isRight:'--'}})
            
            clearInterval(this.time_inter)
            this.count_time()

            
            apis.question({
                userId:wx.getStorageSync('userInfo').userId,
                type:1,
                periodId:options.grader||1,//学龄段
                subject:options.classIndex||1,//科目
                grade:1//先写着一年级   
            },function(res){
                const conclusion = {}
                res.forEach((item,index)=>{
                    if(item.selectList) item.selectList.reverse()
                })
                _this.$set(_this,'question',res.reverse())
                _this.question.forEach((item,index)=>{
                    conclusion[index] = {uid:item.uid,isRight:undefined}
                })
                _this.$set(_this,'conclusion',conclusion)
                
            })
        }
    },

    methods:{
        chooseAnswer(index,chooseAnswer,e,uid){

            /**
             * @description: 已选过的话不可再进行选择
             */
            if(this.conclusion[this.nowIndex].isRight !== void(0)) return false



            const isRight = e.currentTarget.dataset.isright
            const _this = this
            this.$set(this,'answerItem',chooseAnswer)
            // this.$set(this.conclusion,uid,isRight||0)
            this.$set(this.conclusion[this.nowIndex],'isRight',isRight||0)
            this.custAnswer[this.nowIndex] = chooseAnswer
            if(this.time_status){
                // 有定时器
                clearTimeout(this.time_status)
                this.$set(this,'time_status',setTimeout(function(){
                    _this.nextQuestion()
                    _this.$set(_this,'time_status','')
                },1000))
            }else{
                this.$set(this,'time_status',setTimeout(function(){
                    _this.nextQuestion()
                    _this.$set(_this,'time_status','')
                },1000))
            }
            
            // 统计对错等信息
            let right = 0
            let error = 0
            let count = 0
            for(var i of Object.keys(_this.conclusion)){
                switch (_this.conclusion[i].isRight) {
                    case 1:
                        this.$set(this.number,'right',++right)
                        this.$set(this.number,'count',++count)
                        break;
                    case 0:
                        this.$set(this.number,'error',++error)
                        this.$set(this.number,'count',++count)
                        break;
                    default:
                        break;
                }
            }
        },
        preQuestion(){
            if(this.nowIndex<=0){
                wx.showToast({
                    title: '已经是第一题了。',
                    icon: 'none',
                    duration: 2000
                })
                return false
            }
            this.$set(this,'nowIndex',--this.nowIndex)
            this.getAnswerItem()
            this.$set(this,'isShow_analy',false)
        },
        nextQuestion(){
            const _this = this
            if(this.nowIndex>=this.question.length-1){
                wx.showModal({
                    title:'已是最后一题',
                    content:'确认交卷？',
                    cancelText:'检查检查',
                    confirmText:'交卷罗',
                    cancelColor:'#5162e4',
                    confirmColor:'#000000',
                    success(res){
                        if(res.confirm){
                            let ans = ''
                            let isRight_question = 0 //正确的题目数量
                            let count_question = 0 //总共的题目数量
                            Object.values(_this.conclusion).forEach(item=>{
                                count_question++
                                item.isRight?(isRight_question++):''
                                ans += `${item.uid}!${item.isRight?'1':'0'},`  //!为=
                            })
                            wx.redirectTo({
                                url:'/pages/achievement/main?right='+isRight_question+'&ans='+ans.slice(0,-1)+'&zql='+isRight_question/count_question
                            })
                        }
                    },
                    fail(){
                        wx.showToast({
                            title: '系统错误，请联系管理员',
                            icon: 'none',
                            duration: 2000
                        })
                    }
                })
                return false
            }
            this.$set(this,'nowIndex',++this.nowIndex)
            this.getAnswerItem()
            this.$set(this,'isShow_analy',false)
        },
        getAnswerItem(){
            if(this.custAnswer[this.nowIndex]==undefined){
                this.$set(this,'answerItem',-1)
            }else{
                this.$set(this,'answerItem',this.custAnswer[this.nowIndex])
            }
        },
        to(url){
            wx.setStorageSync('conclusion',this.conclusion)

            if(this.ishave_page){
                wx.redirectTo({
                    url:"/pages/"+url+"/main?length="+this.question.length
                })
            }else{
                this.$set(this,'ishave_page',true)
                wx.navigateTo({
                    url:"/pages/"+url+"/main?length="+this.question.length
                })
            }
        },
        // 显示解析
        showAnaly(){
            this.$set(this,'isShow_analy',!this.isShow_analy)
        },
        // 计时的
        count_time(){
            let _this = this
            let cTime = 0
            this.time_inter = setInterval(function(){
                cTime+=1
                const min = Math.floor(cTime/60)<10 ? '0'+Math.floor(cTime/60) : Math.floor(cTime/60)
                const s = (cTime%60)<10 ? '0'+cTime%60 : cTime%60
                _this.$set(_this,'time',min+' : '+s)
            },1000)
        }
    },
    onShareAppMessage(res){
        return {
            title:'我是自定义标题',
            imageUrl:'',//图片样式
            path:''//链接
        }   
    }
}
</script>



<style  scoped lang="less">
.container{
    width: 90%;
    margin: 20rpx auto;
    font-size:32rpx;
    color: #000000;
    .title{
        margin:32rpx 0px;
        .right{
            margin-right: 34rpx;
            color:#2cbc00;
        }
        .error{
            margin-right: 54rpx;
            color:#f40000;
            img{
                margin-right:74rpx;
            }
        }
        .count{
            margin-right: 22rpx;
            color:#070707;
            font-size: 24rpx;
        }
        .right,.error{
            border-radius: 22rpx;
            font-size: 28rpx;
            border:1px solid #eeeeee;
        }
        .right,.error,.count{
            display: inline-block;
            width: 128rpx;
            height:45rpx;
            line-height: 45rpx;
            vertical-align: top;
            white-space: nowrap;
            img{
                width: 36rpx;
                height: 36rpx;
                margin-right: 28rpx;
                float: left;
                margin-left:10rpx;
                margin-top:5rpx;
            }
        }
        .time{
            display: inline-block;
            font-size:24rpx;
            color:#638bed;
            text-align: right;
            float: right;
            margin-top:5rpx;
        }
    }
    
    .analy{
        width: 90%;
        margin: 20rpx auto 0rpx;
        font-size:26rpx;
        line-height:40rpx;
        letter-spacing:2rpx;
        max-height: 40vh;
        overflow:auto;
        // max-height: ceil(40vh + 120rpx);
    }
    .question{
    }   
    .subject{
        margin-left: 20rpx;
    }
    .answer{
        margin-top: 66rpx;
        .active{
            background: #d2d7ff !important;
            >.check{
                background:#5162e4 !important;
                >div{
                    background: white !important; 
                }
            }
        }
        .error{
            background: #fbbfc6 !important;
            >.check{
                background:#f22c43 !important;
                >div{
                    background: white !important; 
                }
            }
        }
        >.item{
            width: 673rpx;
            background: #e8e8f2;
            margin-bottom: 45rpx;
            padding: 28rpx;
            box-sizing:border-box;
            border-radius: 10rpx;
            position:relative;
            .check{
                margin-right:40rpx;
                background:white;
                display:inline-block;
                width:60rpx;
                height:60rpx;
                border-radius:100%;
                border:2rpx solid #1b1b1b;
                text-align:center;
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                >div{
                    margin-top:18rpx;
                    display: inline-block;
                    width: 24rpx;
                    height:24rpx;
                    border-radius: 100%;
                    background: #aaaaaa;
                }
                b{
                    margin-right: 10rpx;
                    font-weight: bold;
                    display: inline;
                    position:absolute;
                    left:80rpx;
                    top:50%;
                    transform:translateY(-50%);
                }
            }
            .option{
                width:60vw;
                word-break:break-all;
                margin-left:23%;
                
            }
        }
    }
    
    .footer{
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        // transition: all 1s;
        background: white;
        padding-top: 20rpx;
        position:fixed;
        .analy{
            width: 90%;
            margin: 20rpx auto 0rpx;
            font-size:26rpx;
            line-height:40rpx;
            letter-spacing:2rpx;
            padding-bottom:20rpx;
            max-height: 40vh;
            overflow:auto;
        }
        >button{
            width: 138rpx;
            height: 68rpx;
            font-size:32rpx;
            color:#fefefe;
            border-radius: 33rpx;
            background: #2757ef;
            line-height: 68rpx;
            text-align: center;
            
        }
        >switch{
            position: absolute;
            right: 0%;
            // transform: translateX(-50%);
            // top:0rpx;
            &::before{
                content:'解析:';
                left:-20rpx;
                position: relative;
            }
        }
        ul{
            margin-top: 80rpx;
            display: flex;
            justify-content: center;
            align-content: middle;
            border-top:1px solid rgba(104,104,104,0.5);
            li{
                font-size: 0px;
                display: inline-block;
                height: 101rpx;
                text-align: center;
                line-height: 101rpx;
                letter-spacing: 4rpx;
                button{
                    font-size:1em;
                    background: transparent;
                    height:100%;
                    line-height:300%;
                    &:after{
                        border:none
                    }
                }
                &:first-child,&:last-child{
                    width: 172rpx;
                    font-size: 32rpx;
                }
                &:nth-child(2n){
                    width: 132rpx;
                    background: rgba(150,179,252,0.5);
                    font-size: 32rpx;
                }
                &:nth-child(3){
                    width: 142rpx;
                    align-self:center;
                    display: table-cell;
                    img{
                        width:47rpx;
                        height: 45rpx;
                        vertical-align:middle;
                    }
                }
                
            }
        }
    }
}
</style>



